<template>
  <div class="bar-index" id="bar"></div>
</template>

<script>
export default {
  mounted() {
    this.drawBar();
  },
  methods: {
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("bar"));

      var option = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 修改图标的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "旅游行业",
              "教育培训",
              "游戏行业",
              "医疗行业",
              "电商行业",
              "社交行业",
              "金融行业",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            // 修改 刻度标签相关样式
            axisLabel: {
              // 里面的值要加引号
              color: "rgba(225,225,255,.6)",
              fontSize: "12",
            },
            // 不显示X坐标轴的 样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              // 里面的值要加引号
              color: "rgba(225,225,255,.6)",
              fontSize: "12",
            },
            //Y轴加一条线 线的宽度也可以
            axisLine: {
              lineStyle: {
                color: "red",
                width: 10,
                type: "soild",
              },
            },
            //分割线 水平方向的分割线
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            // 柱子的宽度
            barWidth: "35%",
            data: [200, 300, 300, 900, 1500, 1200, 600],
            itemStyle: {
              // 修改柱子的圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize",function(){
        myChart.resize();
      })
    },
  },
};
</script>

<style>
.bar-index {
  width: 100%;
  height: 100%;
}
</style>
